//获取应用实例
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isColours: true,
    id: 9,
    type: 1,
    isShow: true,
    pic: '',
    framw: '',
    framw: '',
    phoframe: '',
    phoH: 458,
    phoboxwill: '', //图片宽高比例
    widimg: '', //图片手机内宽度
    heimg: '', //图片手机内高度
    toimg: 0, //图片top
    leimg: 0, //图片top
    Scale: 1, //图片缩放比例
    frawid: '', //图片框宽
    frahei: '', //图片框高
    imgsf: '', //图片实际宽/在手机内部宽
    phobxw: '', //外框宽
    pictrs: '', //最后生成的图片
    phoimgW:'',
    phoimgH:'',
    // 组件所需的参数
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '个性照片', //导航栏 中间的标题
    },
    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20,
    canvasWidth: 0,
    canvasHeight: 0,
    tempCtx: {},
    oriFile: "../../../images/frame/",
    frameSrcs: [{
      src: 'frame1.png',
      title: '文艺小清新'
    }, {
      src: 'frame2.png',
      title: 'Happy Birthday'
    }, {
      src: 'frame3.png',
      title: '素描花环'
    }, {
      src: 'frame4.png',
      title: '文艺小清新'
    }, {
      src: 'frame5.png',
      title: '卡通小屋'
    }, {
      src: 'frame6.png',
      title: '爱心相框'
    }, {
      src: 'frame7.png',
      title: '心形云朵'
    }, {
      src: 'frame8.png',
      title: '爱心花环'
    }, {
      src: 'frame9.png',
      title: '拍立得相框'
    }, {
      src: 'frame10.png',
      title: '文艺小清新'
    }, {
      src: 'frame11.png',
      title: '贴纸'
    }]
  },

  uploadImage: function () {
    let that = this;
    let pic = that.data.pic;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths[0])
        // tempFilePath可以作为img标签的src属性显示图片
        wx.getImageInfo({
          src: tempFilePaths[0],
          success: function (res) {
            that.setData({
              phoboxwill: res.width / res.height,
              widimg: 500,
              heimg: 500 / (res.width / res.height),
              widthimg: 500,
              heightimg: 500 / (res.width / res.height),
              whlin: res.width / res.height,
              imgww: res.width,
              imghh: res.height,
              pic: res.path

            })
            wx.createSelectorQuery().select('.potimg').boundingClientRect(function (rect) {
              //图片放到屏幕缩放比例
              let rewid = rect.width;
              that.setData({
                imgsf: that.data.imgww / rewid,
                imgt: rect.top,
                imgl: rect.left
              })
            }).exec()

          }
        })
        that.setData({
          isShow: false,
          pic: tempFilePaths[0]
        })
      }
    })

  },
  // 触摸
  abtp(e) {
    if (e.touches.length == 1) {
      this.setData({
        pax: e.touches[0].pageX,
        pay: e.touches[0].pageY
      })

    } else if (e.touches.length == 2) {
      let julx = Math.abs(e.touches[0].pageX - e.touches[1].pageX)
      let july = Math.abs(e.touches[0].pageY - e.touches[1].pageY)
      let julione = Math.sqrt(julx * julx + july * july)
      this.setData({
        julione: julione
      })
    }
  },
  // 监听手指移动时间
  seletime(e) {
    // 图片移动
    if (e.touches.length == 1) {
      let liveX = this.data.pax - e.touches[0].pageX
      let liveY = this.data.pay - e.touches[0].pageY
      this.setData({
        toimg: this.data.toimgs - liveY,
        leimg: this.data.leimgs - liveX,

      })

    } else if (e.touches.length == 2) {

      let liveX = Math.abs(e.touches[1].pageX - e.touches[0].pageX)
      let liveY = Math.abs(e.touches[1].pageY - e.touches[0].pageY)
      let julitow = Math.sqrt(liveX * liveX + liveY * liveY)
      let sjuli = julitow - this.data.julione
      //  图片放大
      let Scale = this.data.Scale + 0.005 * sjuli
      if (Scale > 1.5 || Scale < 0.5) {
        return
      } else {
        this.setData({
          Scale: Scale,
          widimg: this.data.widthimg * this.data.Scale,
          heimg: (this.data.widthimg * this.data.Scale) / this.data.phoboxwill,

        })
      }

    }
  },
  // 图片操作结束回调
  endimg(e) {
    let that = this;
    that.setData({
      toimgs: that.data.toimg,
      leimgs: that.data.leimg,
      
    })

  },

  chooseFrame(e) {
    let that = this;
    if(that.data.pic==''){
      wx.showToast({
        title: '请先选择照片',
        icon: 'none',
        duration: 2000
      })
    }else{
      var index = e.currentTarget.dataset.index
    let fileList = [that.data.oriFile + that.data.frameSrcs[index].src]
    console.log(e, fileList)
    wx.getImageInfo({
      src: fileList[0],
      success(res) {
        console.log(res)
        that.setData({
          framw: 312,
          framh: 312 * res.height / res.width,
          phoH: 312 * res.height / res.width,
          phoframe: fileList[0]
        })
        wx.createSelectorQuery().select('.potimg').boundingClientRect(function (re) {
          //图片放到屏幕缩放比例
          that.setData({
            frawid: re.width,
            frahei: re.height
          })
        }).exec()
        wx.createSelectorQuery().select('.phobox').boundingClientRect(function (gy) {
          //图片放到屏幕缩放比例
          that.setData({

            phobxw: gy.width,

          })
        }).exec()
        wx.createSelectorQuery().select('.phoframe').boundingClientRect(function (gc) {
          //图片放到屏幕缩放比例
          that.setData({
            phoimgW:gc.width,
            phoimgH:gc.height,
            
          })
        }).exec()
      }
    })
    }
  },
  // 去打印
  gopicplace_order: function () {
    let that = this;
    if(that.data.pic==''){
      wx.showToast({
        title: '请先选择照片',
        icon: 'none',
        duration: 2000
      })
    }else{
      if(that.data.phoframe==''){
        wx.showToast({
          title: '请选择元素',
          icon: 'none',
          duration: 2000
        })
      }else{
        wx.showLoading({
          title: '正在处理。。。',
        })
        let rpx;
      // 获取不同手机屏幕自适应
      wx.getSystemInfo({
        complete: (res) => {
          rpx = res.windowWidth/414;
        },
      })
      let pics = that.data.pic;
      // 先将图片截取处理
      let imgsf = that.data.imgsf; //图片缩放比例
      let canvswidth = that.data.imgww + that.data.leimg * imgsf; //画布宽度
      let canvsheight = that.data.imghh + that.data.toimg * imgsf; //画布高度
      let Scale = that.data.Scale;
      let imgww = that.data.imgww*rpx;
      let imghh = that.data.imghh*rpx;
      let phoimgW = that.data.phoimgW*rpx;
      let phoimgH = that.data.phoimgH*rpx;
      console.log(canvswidth, canvsheight)
      const ctx1 = wx.createCanvasContext('shareCanvas')
      that.setData({
        canvasHe: that.data.canvsheight,
        canvasWi: that.data.canvswidth
      })
      ctx1.fillRect(0, 0, canvswidth, canvsheight);
      ctx1.setFillStyle("#fff");
      ctx1.drawImage('../../../images/picture/bgA4.png', 0, 0, phoimgW * imgsf, phoimgW * imgsf*152/102) //背景图
      // 绘制图片
      ctx1.drawImage(that.data.pic, that.data.leimg * imgsf/1.8, that.data.toimg * imgsf/1.8, imgww*Scale, imghh*Scale); //绘制图片
      ctx1.drawImage(that.data.phoframe, 0, 0, phoimgW * imgsf , phoimgH * imgsf); //绘制图片

      ctx1.draw(false, function () {
        setTimeout(function () {
          wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
            x: 0,
            y: 0,
            width:  phoimgW * imgsf,
            height:  phoimgW * imgsf*152/102,
            canvasId: 'shareCanvas',
            fileType: 'jpg',
            success: function (res) {
              wx.hideLoading();
              wx.navigateTo({
                url: '/modelA/pages/drawings_printing/picplace_order/picplace_order?pics=' + res.tempFilePath + '&title=' + that.data.nvabarData.title+'&ccinfo='+'10.2*15.2cm' + '&type=' + that.data.type + '&isColours=' + that.data.isColours + '&id=' + that.data.id,
              })
            }
          })
        })
      })
      }
      
    }
   
    

    // console.log(pics)

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})